<template>
  <div class="wrapper">
    <div class="newsType">
      <div class="title">
        <i class="el-icon-document-copy"></i> &nbsp;{{ title }}
      </div>
      <div class="more cursor" @click="redirectToDetailPage">
        更多>>
      </div>

    </div>


    <div>
      <el-row type="flex" justify="space-between" v-for="(item, index) in formattedNews" :key="index" class="row">

        <div class="cursor newsTitle" @click="goNews(item.id)">
          <span v-if="index==0 && isFirstNews && title === '消防要闻'" style="font-size: 28px;">·{{ item.topic }}</span>
          <span v-else style="color: #b1afaf;font-size: 20px">·</span>
          {{ item.topic }}
        </div>
        <div class="time" :style="item.date === 'new' ? 'color:red' : ''">
          {{ item.publishTime }}
        </div>
      </el-row>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "NewsSection",
  props: ['title', 'columnId'],
  data() {
    return {
      news: []
    }
  },
  created() {  
    this.fetchNewsByCategory(); // 在组件创建时获取新闻数据  
  },  
  computed: {
    formattedNews() {
      const copyNews = [...this.news]
      const now = new Date()
      for (let oneNews of copyNews) {
        let publishTime = new Date(oneNews.publishTime)
        if ((now -publishTime ) / (24 * 60 * 60 * 1000) < 3) {
          oneNews.publishTime = 'new'
        } else {
          oneNews.publishTime = this.formattingTime(publishTime.getMonth() + 1) + '-' + this.formattingTime(publishTime.getDate())
        }

      }
      return copyNews
    },
    isFirstNews() {
      return this.title === '消防要闻' && this.news.length > 0;
    },
  },
  methods: {
    // 格式化时间——两位数
    formattingTime(val) {
      if (val < 10) {
        val = '0' + val
      }
      return val
    },
    goNews(id) {
      this.$router.push({
        path: '/home/news',
        query: {
          id: id
        }
      })
    },
    redirectToDetailPage() {
      // 根据标题跳转到详情页面
      if (this.title === '消防要闻') {
        this.$router.push('firenews');
      } else if (this.title === '机关动态') {
        this.$router.push('mechanismdynamivs');
      }else if (this.title === '机关文件') {
        this.$router.push('mechanismfile');
      }else if (this.title === '工作简报') {
        this.$router.push('workpaper');
      }else if (this.title === '工作研讨') {
        this.$router.push('worktalk');
      }else if (this.title === '媒体聚焦') {
        this.$router.push('mediafocus');
      }else if (this.title === '精品文摘') {
        this.$router.push('specialpaper');
      }
    },
    fetchNewsByCategory() { 
      const params = {  
        columnId: this.columnId, // 传递专栏ID  
        page: 1, // 页码  
        pageSize: 2 // 每页大小  
      } 
      console.log("columnId", this.columnId);
      axios.post('/article/byColumn', params)  
        .then(response => {  
          console.log("response", response);
          this.news = response.data.data.records;
        })  
        .catch(error => {  
          console.error(error); // 处理错误  
        });  
    },  
    fetchTopNews() {  
      axios.post('/article/TopAr')  
        .then(response => {   
          this.news = response.data.data.records;  
          if (this.news.length > 0 && this.news.columnId === '1') {  
            this.isFirstNews = true;  
          }  
        })  
        .catch(error => {  
          console.error('Error fetching top news:', error);  
        });  
    },  
  }

}
</script>

<style scoped>
.newsType {
  display: flex;
  justify-content: space-between;
  /*border: red 1px solid;*/
}

.title {
  font-size: 20px;
  color: #2275a1;
  white-space: nowrap;
  border-bottom: 3px solid #2275a1;
}

.row {
  height: 34px;
  display: flex;
  align-items: center;
}

.more {
  font-size: 15px;
  color: #b1afaf;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: right;
  border-bottom: 3px solid rgb(123, 134, 141);
}

.newsTitle {
  white-space: nowrap;
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  margin-left: 10px;
  font-family: "微软雅黑";
  font-weight: 500;
  padding-right: 30px;
}

.time {
  color: #b1afaf;
  white-space: nowrap;
}
</style>